```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML基础知识教程 - 技术小馆</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
            margin-top: 1.5em;
            margin-bottom: 0.5em;
        }
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .card {
            transition: all 0.3s ease;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .code-block {
            background-color: #f8f9fa;
            border-radius: 0.5rem;
            padding: 1rem;
            font-family: 'Courier New', Courier, monospace;
            overflow-x: auto;
        }
        .tag {
            display: inline-block;
            background-color: #e9ecef;
            color: #495057;
            padding: 0.2rem 0.4rem;
            border-radius: 0.25rem;
            font-family: 'Courier New', Courier, monospace;
            font-size: 0.9em;
        }
        .section-divider {
            border: 0;
            height: 1px;
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
            margin: 2rem 0;
        }
        .nav-dot {
            width: 8px;
            height: 8px;
            background-color: #667eea;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }
        footer {
            background-color: #2d3748;
            color: #f7fafc;
        }
        footer a:hover {
            color: #a0aec0;
        }
        .content-img {
            max-width: 100%;
            height: auto;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin: 1rem 0;
        }
        .floating-btn {
            position: fixed;
            right: 2rem;
            bottom: 2rem;
            background-color: #667eea;
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            z-index: 50;
        }
        .floating-btn:hover {
            transform: translateY(-3px);
            background-color: #5a67d8;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">HTML基础知识教程</h1>
            <p class="text-xl md:text-2xl mb-8 opacity-90">从零开始学习现代Web开发基础</p>
            <div class="flex justify-center space-x-4">
                <a href="#section1" class="px-6 py-3 bg-white text-indigo-700 rounded-full font-medium hover:bg-opacity-90 transition">开始学习</a>
                <a href="#section10" class="px-6 py-3 bg-indigo-800 text-white rounded-full font-medium hover:bg-opacity-90 transition">常见名词</a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-5xl px-4 py-12">
        <!-- Section 1 -->
        <section id="section1" class="mb-16">
            <div class="flex items-center mb-6">
                <span class="nav-dot"></span>
                <h2 class="text-3xl font-bold">1. 前端开发的工作模式</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-8">
                <div class="card bg-white p-6">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-paint-brush text-indigo-500 mr-3 text-xl"></i>
                        <h3 class="text-xl font-semibold">设计输出</h3>
                    </div>
                    <p class="text-gray-700 mb-4">设计师通常会提供PSD文件和相关标注，作为前端开发的视觉参考。</p>
                    <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787169558-2795bbc4-7f70-4443-bf65-c6918ab386ae.png" alt="设计输出示例" class="content-img">
                </div>
                
                <div class="card bg-white p-6">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-code text-indigo-500 mr-3 text-xl"></i>
                        <h3 class="text-xl font-semibold">开发输出</h3>
                    </div>
                    <p class="text-gray-700 mb-4">前端开发者将设计转化为实际的HTML、CSS和JavaScript代码。</p>
                    <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787169921-41903a07-e073-455c-b2b3-a486ee98e3c7.png" alt="开发输出示例" class="content-img">
                </div>
            </div>
        </section>

        <!-- Section 2 -->
        <section id="section2" class="mb-16">
            <div class="flex items-center mb-6">
                <span class="nav-dot"></span>
                <h2 class="text-3xl font-bold">2. 运行环境 - 浏览器</h2>
            </div>
            
            <div class="card bg-white p-6 mb-8">
                <p class="text-gray-700 mb-6">浏览器是前端开发的主要运行环境，它负责解析和渲染HTML、CSS和JavaScript代码。</p>
                
                <div class="grid md:grid-cols-2 gap-6 mb-6">
                    <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787170285-92a15209-a292-4e04-8747-41cf0f9e180b.png" alt="浏览器渲染过程" class="content-img">
                    <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787170641-7f3d7692-4df2-440a-9d6a-7c999fc3a679.png" alt="浏览器架构" class="content-img">
                </div>
                
                <div class="bg-blue-50 border-l-4 border-blue-500 p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle text-blue-500 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-blue-700">
                                现阶段：主要是本地直接通过浏览器打开，后期我们再将网页放置到服务器上，通过http协议来访问我们需要的资源
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 3 -->
        <section id="section3" class="mb-16">
            <div class="flex items-center mb-6">
                <span class="nav-dot"></span>
                <h2 class="text-3xl font-bold">3. 开发网页利器</h2>
            </div>
            
            <div class="card bg-white p-6">
                <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787171000-689a2f6c-19d0-4e6f-9d4f-a43631b1e6ea.png" alt="HBuilder开发工具" class="content-img mb-6">
                
                <div class="mb-6">
                    <a href="http://www.dcloud.io/" target="_blank" class="inline-flex items-center text-indigo-600 hover:text-indigo-800">
                        <i class="fas fa-external-link-alt mr-2"></i>
                        <span>官方下载地址：http://www.dcloud.io/</span>
                    </a>
                </div>
                
                <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-lightbulb text-yellow-500 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-yellow-700">
                                其实eclipse也可以进行这方面的开发工作，只是提示方面做得不太好
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 4 -->
        <section id="section4" class="mb-16">
            <div class="flex items-center mb-6">
                <span class="nav-dot"></span>
                <h2 class="text-3xl font-bold">4. 网页的组成部分(HTML+CSS+JAVASCRIPT)</h2>
            </div>
            
            <div class="card bg-white p-6">
                <div class="grid md:grid-cols-3 gap-6">
                    <div class="text-center p-4">
                        <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-code text-indigo-600 text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">HTML</h3>
                        <p class="text-gray-600">页面结构</p>
                    </div>
                    
                    <div class="text-center p-4">
                        <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-palette text-indigo-600 text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">CSS</h3>
                        <p class="text-gray-600">页面样式表现</p>
                    </div>
                    
                    <div class="text-center p-4">
                        <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-cogs text-indigo-600 text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">JavaScript</h3>
                        <p class="text-gray-600">交互行为</p>
                    </div>
                </div>
                
                <div class="mt-6">
                    <p class="text-gray-700">我们来看一个新浪的首页为例</p>
                </div>
            </div>
        </section>

        <!-- Section 5 -->
        <section id="section5" class="mb-16">
            <div class="flex items-center mb-6">
                <span class="nav-dot"></span>
                <h2 class="text-3xl font-bold">5. HTML简介</h2>
            </div>
            
            <div class="card bg-white p-6">
                <p class="text-gray-700 mb-4">
                    HTML（英文Hyper Text Markup Language的缩写）中文译为"<strong>超文本标记语言</strong>"，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片标记等，<strong>网页中需要定义什么内容，就用相应的HTML标记描述即可。</strong>
                </p>
                
                <div class="grid md:grid-cols-2 gap-6 mt-6">
                    <div class="bg-indigo-50 p-4 rounded-lg">
                        <h4 class="font-semibold text-indigo-800 mb-2">超文本</h4>
                        <p class="text-gray-700">图文并茂--视频、音频、图片、文本内容等等</p>
                    </div>
                    
                    <div class="bg-indigo-50 p-4 rounded-lg">
                        <h4 class="font-semibold text-indigo-800 mb-2">标记语言</h4>
                        <p class="text-gray-700">通过标签进行开发</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 6 -->
        <section id="section6" class="mb-16">
            <div class="flex items-center mb-6">
                <span class="nav-dot"></span>
                <h2 class="text-3xl font-bold">6. HTML基本结构</h2>
            </div>
            
            <div class="card bg-white p-6">
                <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787171235-01e04b0e-6d30-4d37-8546-694a82f64593.png" alt="HTML基本结构" class="content-img mb-6">
                
                <div class="bg-blue-50 border-l-4 border-blue-500 p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle text-blue-500 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-blue-700">
                                补充：在head标签里面还可以设置&lt;meta charset="UTF-8"&gt;，来设置编码类型
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 7 -->
        <section id="section7" class="mb-16">
            <div class="flex items-center mb-6">
                <span class="nav-dot"></span>
                <h2 class="text-3xl font-bold">7. 掌握常用的标签</h2>
            </div>
            
            <div class="space-y-12">
                <!-- 7.1 -->
                <div>
                    <h3 class="text-2xl font-semibold mb-4">7.1 标题</h3>
                    <div class="card bg-white p-6">
                        <p class="text-gray-700 mb-4">HTML提供了6级标题标签，从&lt;h1&gt;到&lt;h6&gt;，重要性依次递减。</p>
                        <div class="code-block mb-4">
                            &lt;h1&gt;一级标题&lt;/h1&gt;<br>
                            &lt;h2&gt;二级标题&lt;/h2&gt;<br>
                            &lt;h3&gt;三级标题&lt;/h3&gt;<br>
                            &lt;h4&gt;四级标题&lt;/h4&gt;<br>
                            &lt;h5&gt;五级标题&lt;/h5&gt;<br>
                            &lt;h6&gt;六级标题&lt;/h6&gt;
                        </div>
                        <div class="border border-gray-200 p-4 rounded">
                            <h1 class="text-3xl font-bold">一级标题</h1>
                            <h2 class="text-2xl font-bold">二级标题</h2>
                            <h3 class="text-xl font-bold">三级标题</h3>
                            <h4 class="text-lg font-bold">四级标题</h4>
                            <h5 class="text-base font-bold">五级标题</h5>
                            <h6 class="text-sm font-bold">六级标题</h6>
                        </div>
                    </div>
                </div>
                
                <!-- 7.2 -->
                <div>
                    <h3 class="text-2xl font-semibold mb-4">7.2 段落</h3>
                    <div class="card bg-white p-6">
                        <p class="text-gray-700 mb-4">使用&lt;p&gt;标签定义段落。</p>
                        <div class="code-block mb-4">
                            &lt;p&gt;这是一个段落。&lt;/p&gt;<br>
                            &lt;p&gt;这是另一个段落。&lt;/p&gt;
                        </div>
                        <div class="border border-gray-200 p-4 rounded">
                            <p>这是一个段落。</p>
                            <p>这是另一个段落。</p>
                        </div>
                    </div>
                </div>
                
                <!-- 7.3 -->
                <div>
                    <h3 class="text-2xl font-semibold mb-4">7.3 图片</h3>
                    <div class="card bg-white p-6">
                        <p class="text-gray-700 mb-4">使用&lt;img&gt;标签插入图片，src属性指定图片路径，alt属性为图片提供替代文本。</p>
                        <div class="code-block mb-4">
                            &lt;img src="kebi.jpg" width="100" height="100" alt="test"/&gt;
                        </div>
                        <div class="border border-gray-200 p-4 rounded">
                            <p class="font-semibold mb-2">案例：</p>
                            <ul class="list-disc pl-5 mb-4">
                                <li class="mb-1">调整图像尺寸</li>
                                <li>为图像设置替换文本</li>
                            </ul>
                            <div class="flex justify-center">
                                <div class="w-24 h-24 bg-gray-200 rounded flex items-center justify-center">
                                    <i class="fas fa-image text-gray-400 text-3xl"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 7.4 -->
                <div>
                    <h3 class="text-2xl font-semibold mb-4">7.4 列表 - 无序列表</h3>
                    <div class="card bg-white p-6">
                        <p class="text-gray-700 mb-4">无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。</p>
                        <div class="code-block mb-4">
                            &lt;ul&gt;<br>
                            &nbsp;&nbsp;&lt;li&gt;Coffee&lt;/li&gt;<br>
                            &nbsp;&nbsp;&lt;li&gt;Milk&lt;/li&gt;<br>
                            &lt;/ul&gt;
                        </div>
                        <div class="border border-gray-200 p-4 rounded">
                            <ul class="list-disc pl-5">
                                <li>Coffee</li>
                                <li>Milk</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- 7.5 -->
                <div>
                    <h3 class="text-2xl font-semibold mb-4">7.5 列表 - 有序列表</h3>
                    <div class="card bg-white p-6">
                        <p class="text-gray-700 mb-4">有序列表也是一列项目，列表项目使用数字进行标记。</p>
                        <div class="code-block mb-4">
                            &lt;ol&gt;<br>
                            &nbsp;&nbsp;&lt;li&gt;Coffee&lt;/li&gt;<br>
                            &nbsp;&nbsp;&lt;li&gt;Milk&lt;/li&gt;<br>
                            &lt;/ol&gt;
                        </div>
                        <div class="border border-gray-200 p-4 rounded">
                            <ol class="list-decimal pl-5">
                                <li>Coffee</li>
                                <li>Milk</li>
                            </ol>
                        </div>
                    </div>
                </div>
                
                <!-- 7.6 -->
                <div>
                    <h3 class="text-2xl font-semibold mb-4">7.6 列表 - 定义列表</h3>
                    <div class="card bg-white p-6">
                        <p class="text-gray-700 mb-4">自定义列表不仅仅是一列项目，而是项目及其注释的组合。</p>
                        <div class="code-block mb-4">
                            &lt;dl&gt;<br>
                            &nbsp;&nbsp;&lt;dt&gt;Coffee&lt;/dt&gt;<br>
                            &nbsp;&nbsp;&lt;dd&gt;Black hot drink&lt;/dd&gt;<br>
                            &nbsp;&nbsp;&lt;dt&gt;Milk&lt;/dt&gt;<br>
                            &nbsp;&nbsp;&lt;dd&gt;White cold drink&lt;/dd&gt;<br>
                            &lt;/dl&gt;
                        </div>
                        <div class="border border-gray-200 p-4 rounded">
                            <dl>
                                <dt class="font-semibold">Coffee</dt>
                                <dd class="ml-4 mb-2 text-gray-600">Black hot drink</dd>
                                <dt class="font-semibold">Milk</dt>
                                <dd class="ml-4 text-gray-600">White cold drink</dd>
                            </dl>
                        </div>
                    </div>
                </div>
                
                <!-- 7.7 -->
                <div>
                    <h3 class="text-2xl font-semibold mb-4">7.7 无序列表案例</h3>
                    <div class="card bg-white p-6">
                        <div class="code-block mb-4">
&lt;html&gt;
&lt;body&gt;

&lt;h4&gt;Disc 项目符号列表：&lt;/h4&gt;
&lt;ul type="disc"&gt;
 &lt;li&gt;苹果&lt;/li&gt;
 &lt;li&gt;香蕉&lt;/li&gt;
 &lt;li&gt;柠檬&lt;/li&gt;
 &lt;li&gt;桔子&lt;/li&gt;
&lt;/ul&gt;  

&lt;h4&gt;Circle 项目符号列表：&lt;/h4&gt;
&lt;ul type="circle"&gt;
 &lt;li&gt;苹果&lt;/li&gt;
 &lt;li&gt;香蕉&lt;/li&gt;
 &lt;li&gt;柠檬&lt;/li&gt;
 &lt;li&gt;桔子&lt;/li&gt;
&lt;/ul&gt;  

&lt;h4&gt;Square 项目符号列表：&lt;/h4&gt;
&lt;ul type="square"&gt;
 &lt;li&gt;苹果&lt;/li&gt;
 &lt;li&gt;香蕉&lt;/li&gt;
 &lt;li&gt;柠檬&lt;/li&gt;
 &lt;li&gt;桔子&lt;/li&gt;
&lt;/ul&gt;  

&lt;/body&gt;
&lt;/html&gt;
                        </div>
                        <div class="border border-gray-200 p-4 rounded">
                            <h4 class="font-semibold mb-2">Disc 项目符号列表：</h4>
                            <ul class="list-disc pl-5 mb-4">
                                <li>苹果</li>
                                <li>香蕉</li>
                                <li>柠檬</li>
                                <li>桔子</li>
                            </ul>
                            
                            <h4 class="font-semibold mb-2">Circle 项目符号列表：</h4>
                            <ul class="list-circle pl-5 mb-4">
                                <li>苹果</li>
                                <li>香蕉</li>
                                <li>柠檬</li>
                                <li>桔子</li>
                            </ul>
                            
                            <h4 class="font-semibold mb-2">Square 项目符号列表：</h4>
                            <ul class="list-square pl-5">
                                <li>苹果</li>
                                <li>香蕉</li>
                                <li>柠檬</li>
                                <li>桔子</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- 7.8 -->
                <div>
                    <h3 class="text-2xl font-semibold mb-4">7.8 有序列表案例</h3>
                    <div class="card bg-white p-6">
                        <div class="code-block mb-4">
&lt;html&gt;
&lt;body&gt;

&lt;h4&gt;数字列表：&lt;/h4&gt;
&lt;ol&gt;
 &lt;li&gt;苹果&lt;/li&gt;
 &lt;li&gt;香蕉&lt;/li&gt;
 &lt;li&gt;柠檬&lt;/li&gt;
 &lt;li&gt;桔子&lt;/li&gt;
&lt;/ol&gt;  

&lt;h4&gt;字母列表：&lt;/h4&gt;
&lt;ol type="A"&gt;
 &lt;li&gt;苹果&lt;/li&gt;
 &lt;li&gt;香蕉&lt;/li&gt;
 &lt;li&gt;柠檬&lt;/li&gt;
 &lt;li&gt;桔子&lt;/li&gt;
&lt;/ol&gt;  

&lt;h4&gt;小写字母列表：&lt;/h4&gt;
&lt;ol type="a"&gt;
 &lt;li&gt;苹果&lt;/li&gt;
 &lt;li&gt;香蕉&lt;/li&gt;
 &lt;li&gt;柠檬&lt;/li&gt;
 &lt;li&gt;桔子&lt;/li&gt;
&lt;/ol&gt;  

&lt;/body&gt;
&lt;/html&gt;
                        </div>
                        <div class="border border-gray-200 p-4 rounded">
                            <h4 class="font-semibold mb-2">数字列表：</h4>
                            <ol class="list-decimal pl-5 mb-4">
                                <li>苹果</li>
                                <li>香蕉</li>
                                <li>柠檬</li>
                                <li>桔子</li>
                            </ol>
                            
                            <h4 class="font-semibold mb-2">字母列表：</h4>
                            <ol class="list-upper-alpha pl-5 mb-4">
                                <li>苹果</li>
                                <li>香蕉</li>
                                <li>柠檬</li>
                                <li>桔子</li>
                            </ol>
                            
                            <h4 class="font-semibold mb-2">小写字母列表：</h4>
                            <ol class="list-lower-alpha pl-5">
                                <li>苹果</li>
                                <li>香蕉</li>
                                <li>柠檬</li>
                                <li>桔子</li>
                            </ol>
                        </div>
                    </div>
                </div>
                
                <!-- 7.9 -->
                <div>
                    <h3 class="text-2xl font-semibold mb-4">7.9 嵌套列表案例</h3>
                    <div class="card bg-white p-6">
                        <p class="text-gray-700 mb-4">一个嵌套列表：</p>
                        <div class="border border-gray-200 p-4 rounded">
                            <ul class="list-disc pl-5">
                                <li>咖啡</li>
                                <li>茶
                                    <ul class="list-disc pl-5">
                                        <li>红茶</li>
                                        <li>绿茶</li>
                                    </ul>
                                </li>
                                <li>牛奶</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- 7.10 -->
                <div>
                    <h3 class="text-2xl font-semibold mb-4">7.10 超链接</h3>
                    <div class="card bg-white p-6">
                        <p class="text-gray-700 mb-4">
                            超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
                            当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
                            我们通过使用 &lt;a&gt; 标签在 HTML 中创建链接。
                            有两种使用 &lt;a&gt; 标签的方式：
                        </p>
                        
                        <div class="grid md:grid-cols-2 gap-4 mb-6">
                            <div class="bg-indigo-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-indigo-800 mb-2">1. 通过使用 href 属性</h4>
                                <p class="text-gray-700">创建指向另一个文档的链接</p>
                            </div>
                            
                            <div class="bg-indigo-50 p-4 rounded-lg">
                                <h4 class="font-semibold text-indigo-800 mb-2">2. 通过使用 name 属性</h4>
                                <p class="text-gray-700">创建文档内的书签</p>
                            </div>
                        </div>
                        
                        <div class="space-y-6">
                            <div>
                                <h4 class="font-semibold mb-2">案例一：</h4>
                                <p class="text-gray-700 mb-2">掌握href属性，跳转到另一个文档</p>
                                <div class="code-block mb-2">
                                    &lt;a href="http://www.baidu.com/" target="_blank"&gt;Visit Baidu!&lt;/a&gt;
                                </div>
                                <div class="border border-gray-200 p-4 rounded">
                                    <a href="http://www.baidu.com/" target="_blank" class="text-indigo-600 hover:text-indigo-800 hover:underline">Visit Baidu!</a>
                                </div>
                            </div>
                            
                            <div>
                                <h4 class="font-semibold mb-2">案例二：</h4>
                                <p class="text-gray-700">链接到不同目录的文件时，如何处理？</p>
                            </div>
                            
                            <div>
                                <h4 class="font-semibold mb-2">案例三：</h4>
                                <p class="text-gray-700">制作图像链接</p>
                            </div>
                            
                            <div>
                                <h4 class="font-semibold mb-2">案例四：</h4>
                                <p class="text-gray-700 mb-2">掌握name属性，创建锚链接</p>
                                <div class="code-block mb-2">
                                    &lt;a name="C4"&gt;Chapter 4&lt;/a&gt;<br>
                                    &lt;a href="#C4"&gt;查看 Chapter 4。&lt;/a&gt;
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 7.11 -->
                <div>
                    <h3 class="text-2xl font-semibold mb-4">7.11 表格</h3>
                    <div class="card bg-white p-6">
                        <p class="text-gray-700 mb-4">
                            表格由 &lt;table&gt; 标签来定义。每个表格均有若干行（由 &lt;tr&gt; 标签定义），每行被分割为若干单元格（由 &lt;td&gt; 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
                        </p>
                        
                        <div class="code-block mb-4">
                            &lt;table border="1" cellspacing="" cellpadding=""&gt;<br>
                            &nbsp;&nbsp;&lt;thead&gt;<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;&lt;th&gt;Header&lt;/th&gt;&lt;/tr&gt;<br>
                            &nbsp;&nbsp;&lt;/thead&gt;<br>
                            &nbsp;&nbsp;&lt;tbody&gt;<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;&lt;td&gt;Data&lt;/td&gt;&lt;/tr&gt;<br>
                            &nbsp;&nbsp;&lt;/tbody&gt;<br>
                            &nbsp;&nbsp;&lt;tfoot&gt;<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;&lt;td&gt;Data&lt;/td&gt;&lt;/tr&gt;<br>
                            &nbsp;&nbsp;&lt;/tfoot&gt;<br>
                            &lt;/table&gt;
                        </div>
                        
                        <div class="mb-6">
                            <p class="font-semibold mb-2">案例：</p>
                            <p class="text-gray-700 mb-2">采用表格来展示学员数据</p>
                            <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787171475-18c599f8-fd71-409e-8d9b-f59b49109ca9.png" alt="表格案例" class="content-img">
                        </div>
                        
                        <p class="text-gray-700">跨行和跨列的单元格</p>
                    </div>
                </div>
                
                <!-- 7.12 -->
                <div>
                    <h3 class="text-2xl font-semibold mb-4">7.12 表单</h3>
                    <div class="card bg-white p-6">
                        <p class="text-gray-700 mb-4">
                            HTML 表单用于收集用户输入。&lt;form&gt; 元素定义 HTML 表单。
                        </p>
                        
                        <div class="code-block mb-4">
                            &lt;form&gt;<br>
                            &nbsp;&nbsp;form elements<br>
                            &lt;/form&gt;
                        </div>
                        
                        <p class="text-gray-700 mb-4">
                            HTML 表单包含表单元素。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
                        </p>
                        
                        <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787171710-a0a19357-9e43-43c1-a77d-95b3be2cb4ff.png" alt="表单示例" class="content-img mb-4">
                        
                        <p class="text-gray-700">
                            上述表单有文本框，密码框，下拉列表，提交按钮<br>
                            补充：单选按钮组，复选框，文本域及普通按钮等表单元素<br><br>
                            至于method,action,name等关键属性是讲解后端的时候再用上
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 8 -->
        <section id="section8" class="mb-16">
            <div class="flex items-center mb-6">
                <span class="nav-dot"></span>
                <h2 class="text-3xl font-bold">8. HTML框架</h2>
            </div>
            
            <div class="card bg-white p-6">
                <p class="text-gray-700 mb-4">
                    <strong>通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。</strong>
                </p>
                
                <div class="mb-6">
                    <p class="text-blue-700 font-semibold mb-2">框架结构标签（&lt;frameset&gt;）一般，我们习惯叫框架集</p>
                    <ul class="list-disc pl-5 space-y-1">
                        <li>框架结构标签（&lt;frameset&gt;）定义如何将窗口分割为框架</li>
                        <li>每个 frameset 定义了一系列行或列</li>
                        <li>rows/columns 的值规定了每行或每列占据屏幕的面积</li>
                    </ul>
                </div>
                
                <div class="mb-6">
                    <p class="font-semibold mb-2">框架标签（Frame）</p>
                    <p class="text-gray-700 mb-2">Frame 标签定义了放置在每个框架中的 HTML 文档。</p>
                    <p class="text-gray-700 mb-2">
                        在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：
                    </p>
                    <div class="code-block mb-2">
                        &lt;frameset cols="25%,75%"&gt;<br>
                        &nbsp;&nbsp;&lt;frame src="frame_a.htm"&gt;<br>
                        &nbsp;&nbsp;&lt;frame src="frame_b.htm"&gt;<br>
                        &lt;/frameset&gt;
                    </div>
                </div>
                
                <div class="mb-6">
                    <p class="font-semibold mb-2">基本的注意事项 - 有用的提示：</p>
                    <ul class="list-disc pl-5 space-y-1">
                        <li>假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 &lt;frame&gt; 标签中加入：noresize="noresize"。</li>
                        <li>为不支持框架的浏览器添加 &lt;noframes&gt; 标签。</li>
                    </ul>
                </div>
                
                <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-triangle text-yellow-500 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-yellow-700">
                                <strong>重要提示：</strong>不能将 &lt;body&gt;&lt;/body&gt; 标签与 &lt;frameset&gt;&lt;/frameset&gt; 标签同时使用！不过，假如你添加包含一段文本的 &lt;noframes&gt; 标签，就必须将这段文字嵌套于 &lt;body&gt;&lt;/body&gt; 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="space-y-6">
                    <div>
                        <p class="font-semibold mb-2">案例：</p>
                        <p class="text-gray-700 mb-2">如何使用 &lt;noframes&gt; 标签</p>
                        <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787172038-665626ee-ffae-4a20-b108-b85aeb0242fb.png" alt="noframes案例" class="content-img">
                        <div class="code-block mt-2">
&lt;html&gt;
&lt;frameset cols="25%,50%,25%"&gt;
  &lt;frame src="/example/html/frame_a.html"&gt;
  &lt;frame src="/example/html/frame_b.html"&gt;
  &lt;frame src="/example/html/frame_c.html"&gt;
&lt;noframes&gt;
&lt;body&gt;您的浏览器无法处理框架！&lt;/body&gt;
&lt;/noframes&gt;
&lt;/frameset&gt;
&lt;/html&gt;
                        </div>
                    </div>
                    
                    <div>
                        <p class="text-gray-700 mb-2">混合框架结构</p>
                        <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787172270-d0d38abf-6d20-4e44-bdb4-4a49e0ccfe50.png" alt="混合框架案例" class="content-img">
                        <div class="code-block mt-2">
&lt;html&gt;
&lt;frameset rows="50%,50%"&gt;
  &lt;frame src="/example/html/frame_a.html"&gt;
  &lt;frameset cols="25%,75%"&gt;
    &lt;frame src="/example/html/frame_b.html"&gt;
    &lt;frame src="/example/html/frame_c.html"&gt;
&lt;/frameset&gt;
&lt;/frameset&gt;
&lt;/html&gt;
                        </div>
                    </div>
                    
                    <div>
                        <div class="code-block">
&lt;html&gt;
&lt;frameset cols="<span class="text-red-600">50%,*,25%</span>"&gt;
  &lt;frame src="/example/html/frame_a.html" <span class="text-red-600">noresize="noresize"</span> /&gt;
  &lt;frame src="/example/html/frame_b.html" /&gt;
  &lt;frame src="/example/html/frame_c.html" /&gt;
&lt;/frameset&gt;
&lt;/html&gt;
                        </div>
                    </div>
                    
                    <div>
                        <p class="text-gray-700 mb-2">制作导航框架</p>
                        <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787172447-9a67451f-14cc-487e-8d21-d0fcd2b85d58.png" alt="导航框架案例" class="content-img">
                        <p class="text-gray-700 mt-2">左侧的链接通过target属性关联到右侧的页面，设置值为name的值</p>
                        <div class="code-block mt-2">
&lt;html&gt;
&lt;frameset cols="120,*"&gt;
  &lt;frame src="/example/html/html_contents.html"&gt;
  &lt;frame src="/example/html/frame_a.html" <span class="text-red-600">name="showframe"</span>&gt;
&lt;/frameset&gt;
&lt;/html&gt;
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 9 -->
        <section id="section9" class="mb-16">
            <div class="flex items-center mb-6">
                <span class="nav-dot"></span>
                <h2 class="text-3xl font-bold">9. HTML内联框架</h2>
            </div>
            
            <div class="card bg-white p-6">
                <p class="text-gray-700 mb-4">
                    <strong>iframe 用于在网页内显示网页。</strong>
                </p>
                
                <div class="space-y-6">
                    <div>
                        <h4 class="font-semibold mb-2">设置宽度和高度</h4>
                        <div class="code-block">
                            &lt;iframe src="demo_iframe.htm" width="200" height="200"&gt;&lt;/iframe&gt;
                        </div>
                    </div>
                    
                    <div>
                        <h4 class="font-semibold mb-2">设置边框为0</h4>
                        <div class="code-block">
                            &lt;iframe src="demo_iframe.htm" frameborder="0"&gt;&lt;/iframe&gt;
                        </div>
                    </div>
                    
                    <div>
                        <h4 class="font-semibold mb-2">使用 iframe 作为链接的目标</h4>
                        <p class="text-gray-700 mb-2">iframe 可用作链接的目标（target）。</p>
                        <p class="text-gray-700 mb-2">链接的 target 属性必须引用 iframe 的 name 属性：</p>
                        <div class="code-block">
                            &lt;iframe src="demo_iframe.htm" <span class="text-red-600">name="iframe_a"</span>&gt;&lt;/iframe&gt;<br>
                            &lt;p&gt;&lt;a href="http://www.baidu.com" <span class="text-red-600">target="iframe_a"</span>&gt; www.baidu.com&lt;/a&gt;&lt;/p&gt;
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 10 -->
        <section id="section10" class="mb-16">
            <div class="flex items-center mb-6">
                <span class="nav-dot"></span>
                <h2 class="text-3xl font-bold">10. 补充说明：常见名词的解释</h2>
            </div>
            
            <div class="card bg-white p-6">
                <div class="space-y-4">
                    <div>
                        <h3 class="text-xl font-semibold text-blue-700 mb-2">WWW</h3>
                        <p class="text-gray-700">
                            万维网（world wide web），它是提供网站相关服务，人们可以通过万维网服务进行网上聊天、网上冲浪、网购、搜索资料、查看天气、查看新闻、交友聊天等。
                        </p>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold text-blue-700 mb-2">W3C</h3>
                        <p class="text-gray-700">
                            万维网联盟创建于1994年。是Web技术领域最具权威和影响力的国际中立性技术标准机构。我们后面学的html、css等标准都是由此机构主导制定。
                        </p>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold text-blue-700 mb-2">HTTP</h3>
                        <p class="text-gray-700">
                            超文本传输协议（HTTP，HyperText Transfer Protocol），也就是浏览器和服务器端的网页传输数据的约束和规范。
                        </p>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold text-blue-700 mb-2">DNS</h3>
                        <p class="text-gray-700">
                            DNS（Domain Name System，域名系统），因特网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过主机名，最终得到该主机名对应的IP地址的过程叫做域名解析（或主机名解析）。
                        </p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="py-8">
        <div class="container mx-auto max-w-5xl px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p class="text-lg font-medium">技术小馆</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" target="_blank" class="text-gray-300 hover:text-white transition">
                        <i class="fas fa-external-link-alt mr-2"></i>
                        www.yuque.com/jtostring
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Back to top button -->
    <a href="#" class="floating-btn">
        <i class="fas fa-arrow-up"></i>
    </a>

    <script>
        // Back to top button functionality
        document.querySelector('.floating-btn').addEventListener('click', function(e) {
            e.preventDefault();
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    </script>
</body>
</html>
```